<link href="{$base_dir}index.php/css/jquery.autocomplete.css" rel="stylesheet" type="text/css">
<script src="{$base_dir}js/jquery.autocomplete.lhv.js" type="text/javascript" ></script>
<script src="{$base_dir}js/AJAX_Surgery_Equipment.js" type="text/javascript" ></script>

{literal}
<script type="text/javascript">

	$(document).ready(function() {				
		$('#equipmentTabs').tabs({			
			select: showEquipmentTemplate			
		});
{/literal}

{literal}
		$('#equipmentTemplate').dialog({
			autoOpen: false,			
			modal: true,
			width: 890,
			height: 510,
			buttons: {
			{/literal}"{translate}Close{/translate}"{literal}: function() { 
					$(this).dialog('close');
					
				},				
				{/literal}"{translate}Save{/translate}"{literal}: function() {
					var templateId = $('#currentTemplateId').val();
					if (templateId <= 0) {		
						return false;
					}
					saveEquipmentTemplate(templateId);
				},
				{/literal}"{translate}Select{/translate}"{literal}: function() {
					var templateId = $('#currentTemplateId').val();					
					if (templateId <= 0) {		
						return false;
					}
					pickTemplate(templateId);
				}								
			}
		});	
		registerAutoComplete('medicineTbl', 1);
		registerAutoComplete('equipmentTbl', 2);		
	});	
	
	function showEquipmentTemplate(event, ui) {
		var templateId = ui.tab.rel;
		getTemplate(templateId);	
	}
	
	// get first template
	var firstTemplateId = $('#firstTemplateId').val();
	if (firstTemplateId > 0) {
		getTemplate(firstTemplateId);
	}	
		
</script>
{/literal}
<div class="form_container" style='margin-top: 10px; margin-bottom: 10px;'>
	<table border="0" cellpadding="0" cellspacing="0" width="100%">	   	  
	   <tr>
	   		<td style="vertical-align: middle;">
	   			<input type="button" name="surgery_equipment" 
	   				id="surgery_equipment" onclick='javascript:actionBackSurgeryPage();' 
	   				value="&lt;&lt; {translate}Surgical information{/translate} &lt;&lt;">
	   		</td>
	   		<td align="right">
	   			<a id="popUpDialog" href="javascript:showEquipmentTemplateDialog();"><img src="../images/copy_paste.png"></a>	   			  	   				 	   			
	   		</td>
	   </tr>	   	   
	</table>
</div>
<div style="display: block;">
	<span id="errorNameMessage" style="font-style: italic; color: rgb(255,0,0);"></span>
</div>
<div style="display: block;">
	<span id="errorNumberMessage" style="font-style: italic; color: rgb(255,0,0);"></span>
</div>
<form id='surgery_equipment_form'>
	<div style="width: 480px; float: left; margin-right: 20px;">
		<table id='medicineTbl' class='grid' cellpadding='0' cellspacing='0' style='width: 100%'>
			<caption><span style="text-transform: uppercase;">{translate}LIST OF MEDICINES{/translate}</span></caption>
			<thead>
				<tr>
					<th>{translate}Medicine type{/translate}</th>
					<th>{translate}Medicine name{/translate}</th>
					<th>{translate}Quantity{/translate}</th>
				</tr>
			</thead>
			<tbody>
				{$medicineBody}
			</tbody>
		</table>
	</div>
	
	<div style="width: 480px;">
		<table id='equipmentTbl' class='grid' cellpadding='0' cellspacing='0' width='100%'>
			<caption><span style="text-transform: uppercase;">{translate}LIST OF MEDICIAL INSTRUMENTS{/translate}</span></caption>
			<thead>
				<tr>
					<th>{translate}Instrument type{/translate}</th>
					<th>{translate}Instrument name{/translate}</th>
					<th>{translate}Quantity{/translate}</th>
				</tr>
			</thead>
			<tbody>
				{$equipmentBody}
			</tbody>
		</table>
	</div>


<div id="buttons">
	<table width="100%">
		<tbody>
			<tr>
				<td  width="16%">
					<input id="equipmentSaveBtn" type='button' value='{translate}Save{/translate}' onclick="javascript:SaveEquipment();">
					<div id="equipmentBarLoading" style="display:none;">
						<img src="../images/ajax-loader.gif"/>
					</div>
				</td>
				<td>
					<span id='save_message' style="font-style: italic; color: rgb(84,191,4);"></span>
				</td>				
			</tr>
		</tbody>
	</table>
</div>

</form>

<div id="equipmentTemplate" style="display: none;" title="{translate}Medicines and materials template{/translate}">
	<div id="equipmentTabs">
		<ul>
		{foreach from=$templates item=template}				
			<li>
				<a href="#wrapper" rel="{$template.template_equipment_id}">
					<span style="font-weight:bold;">{$template.name}</span>
					<br /> {if $template.description == ''} &nbsp; {else} {$template.description}{/if}
				</a>
			</li>		
		{/foreach}
		</ul>		
		<div id="wrapper">
			<input type="hidden" id="firstTemplateId" value="{$firstTemplateId}">						
			<div id="equipmentTemplateDetails">
				
			</div>													
		</div>
		<!-- end wrapper -->
				
	</div>	
</div>
